<template>
  <view>
    <u-navbar title="确认订单" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#333" back-icon-color="#333"></u-navbar>

    <view
      class=""
      style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx; height: 262rpx; display: flex; align-items: center; justify-content: center"
      v-if="!address"
      @tap="huan"
    >
      <view class="" style="background: #f8f8f8; width: 648rpx; height: 189rpx; display: flex; align-items: center; justify-content: center">
        <image src="https://wenzhen.fuerle168.com/static/shop/add.png" mode="" style="width: 36rpx; height: 36rpx"></image>
        <view class="" style="font-size: 28rpx; color: #999999; padding-left: 14rpx">添加收货地址</view>
      </view>
    </view>
    <!-- 地址 -->
    <view class="" style="display: flex; align-items: center; padding: 29rpx 20rpx; background: #fff; margin: 36rpx 28rpx; border-radius: 20rpx" @tap="huan" v-else>
      <view class="" style="font-size: 28rpx; padding-left: 24rpx">
        <view class="">
          <text style="font-size: 30rpx; font-weight: bold">{{ address.name }}</text>
          <text style="padding-left: 15rpx">{{ address.mobile }}</text>
        </view>
        <view class="" style="width: 517rpx; padding-top: 15rpx">{{ address.city }}{{ address.details }}</view>
      </view>
    </view>

    <!-- 药品 -->
    <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" v-for="(i, k) in list" :key="k">
        <view class="" style="padding: 19rpx 17rpx; display: flex; align-items: center; justify-content: space-between">
          <view class="" style="font-size: 30rpx; display: flex; align-items: center">
            <view class="" style="width: 36rpx; height: 36rpx">
              <image src="https://wenzhen.fuerle168.com/static/shop/user/z4.png" mode="" style="width: 36rpx; height: 36rpx"></image>
            </view>

            <view class="" style="padding-left: 18rpx">
              {{ i.hospital_name ? i.hospital_name : '' }}
            </view>
          </view>
        </view>

        <view class="" style="display: flex; align-items: center; padding-left: 15rpx; padding-top: 10rpx" v-for="(m, n) in i.goods" :key="n">
          <image :src="img_url + m.specs_image" mode="aspectFill" style="width: 176rpx; height: 176rpx; border-radius: 20rpx"></image>
          <view class="" style="" style="padding-left: 12rpx">
            <view class="" style="width: 350rpx; font-size: 28rpx">
              {{ m.goods_name }}
            </view>
            <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 15rpx 0">
              <view class="" style="color: #e50014; font-weight: bold">
                <text style="font-size: 28rpx">￥</text>
                <text style="font-size: 38rpx">{{ m.price }}</text>
              </view>
              <view class="" style="margin-left: 150rpx">
                <u-number-box v-model="m.goods_num" @change="valChange(m.goods_num, n, k)" :disabled="!year ? false : true" :min="1"></u-number-box>
              </view>
            </view>
            <view
              class=""
              style="
                width: 106rpx;
                text-align: center;
                line-height: 36rpx;
                font-size: 22rpx;
                color: #e50014;
                height: 36rpx;
                background: #ffedee;
                border-radius: 4rpx;
                margin-left: 15rpx;
              "
            >
              {{ m.label_text }}
            </view>
          </view>
        </view>
      </view>

      <view
        class=""
        style="margin: 45rpx 28rpx; border: 1rpx solid #e7e7e7; border-radius: 4rpx; font-size: 24rpx; line-height: 60rpx; height: 60rpx; text-align: center; color: #999"
      >
        非质量问题退货运费由退货人自费，不接受到付
      </view>

      <view class="" style="font-size: 28rpx; display: flex; justify-content: space-between; padding: 0 27rpx">
        <view class="" style="color: #666666">商品金额：</view>
        <view class="">
          ￥{{ total }}
          <!-- {{arr.price * number}} -->
        </view>
      </view>

      <view class="" style="font-size: 28rpx; display: flex; justify-content: space-between; padding: 40rpx 27rpx">
        <view class="" style="color: #666666">优惠券：</view>
        <view class="">
          <u-icon name="arrow-right" color="#444444" size="28" :label="'- ' + discount" label-pos="left"></u-icon>
        </view>
      </view>
      <view class="" style="font-size: 28rpx; display: flex; justify-content: space-between; padding: 0rpx 27rpx 40rpx 27rpx">
        <view class="" style="color: #666666">合计：</view>
        <view class="">￥{{ total - discount }}</view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="" style="height: 110rpx"></view>

    <view
      class=""
      style="
        background: #fff;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
        height: 99rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        width: 100%;
      "
    >
      <view class="" style="font-size: 32rpx; padding-left: 54rpx">
        <text>实际支付:</text>
        <text style="color: #e50014; font-weight: bold">￥{{ total - discount }}</text>
      </view>

      <view class="btn1" style="margin-left: 22rpx; margin-right: 28rpx" @tap="pay">立即支付</view>
    </view>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#fff'
      },
      value: 0,
      list: {},
      num: null,
      address: null,
      arr: {},
      number: 1,
      total: 0,
      coupon: {},
      year: null,
      discount: 0,
      coupon_id: 0
    };
  },
  onReady() {
    this.getCoupon();
  },
  //方法
  methods: {
    statistics() {
      let total = 0;
      this.list.find((item, index) => {
        item.goods.find((itemq, indexq) => {
          console.log(itemq, '---');
          total = total + itemq.price * itemq.goods_num;
        });
      });
      this.total = total.toFixed(2);

      console.log(this.total);
    },
    getCoupon() {
      this.api({
        url: '/api/shop/getCoupon',
        method: 'post',
        data: {
          all_price: this.total,
          style: 2
        }
      }).then((res) => {
        this.coupon = res.data;
        this.discount = res.data.discount;
        // this.coupon_id=res.data.coupon_id
        console.log(this.coupon.discount, '这是优惠券');
      });
    },
    huan() {
      uni.navigateTo({
        url: '/shop/address/address?type=2'
      });
    },
    valChange(a, e, k) {
      console.log('当前值为: ' + a, e);
      this.list[k].goods[e].goods_num + 1;
      this.statistics();
      // if(e.value==0){
      // 	uni.showToast({
      // 		title:'商品数量不能为0',
      // 		icon:'none'
      // 	})
      // }else{
      // 	this.number=e.value
      // }
    },
    add() {
      this.api({
        url: '/api//shop/getAddressDefault',
        metood: 'post'
      }).then((res) => {
        this.address = res.data;
      });
    },
    pay() {
      console.log(this.list);
      let arr = [];
      let arr1 = [];
      this.list.map((i) => {
        i.goods.map((m) => {
          arr.push(m);
        });
      });
      console.log(this.address, '地址的id');
      if (!this.address) {
        return uni.showToast({
          title: '请选则收货地址',
          icon: 'none'
        });
      }
      this.api({
        url: '/api//shop/createOrder',
        method: 'post',
        data: {
          address_id: this.address.address_id,
          goods: JSON.stringify(arr),
          source: 'miniapp',
          coupon_id: this.coupon_id
        }
      }).then((res) => {
        uni.navigateTo({
          url: '/shop/cash/cash?id=' + res.data.order_id + '&pic=' + (this.total - this.discount)
        });
      });
    }
  },
  //首页渲染
  onLoad(op) {
    this.list = JSON.parse(op.type).list;
    console.log(JSON.parse(op.type));
    this.arr = JSON.parse(op.type);
    if (op.year) {
      this.year = op.year;
    }
    this.add();
    this.statistics();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}

.btn {
  width: 168rpx;
  height: 62rpx;
  background: #ffffff;
  border: 1rpx solid #999999;
  border-radius: 31rpx;
  line-height: 62rpx;
  color: #666666;
  font-size: 28rpx;
  text-align: center;
}

.btn1 {
  width: 200rpx;
  height: 66rpx;
  background: linear-gradient(0deg, #e50014 0%, #ff6572 100%);
  border-radius: 33rpx;

  line-height: 66rpx;
  color: #f8f8f8;
  font-size: 28rpx;
  text-align: center;
}
</style>
